<template>
  <div>
    <div class="option">
      <el-button
        type="primary"
        size="small"
        @click="shuax()"
      >刷新</el-button>
    </div>
    <div class="ddddd">
      <span class="wewewe">序号</span>
      <span class="didi ssss">内容</span>
      <span class="didi">时间</span>
    </div>
    <div
      class="ddddd"
      v-for="(item,index) in huixianList.list"
      :key="index"
    >
      <span class="wewewe">{{item.index}}</span>
      <span class="didi ssss">{{item.content}}</span>
      <span class="didi">{{item.createTime}}</span>
    </div>
    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="13"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      huixianList: [],
      currentPage4: 1,
      total: 0,
      ListL: [],
      val: 1 //当前多少页
    };
  },
  mounted() {
    this.toBottom();
  },
  methods: {
    toBottom() {
      let url = "/news/getList";
      this.httpPost(
        url,
        { key: "RA", pageNum: this.val, pageSize: 13 },
        res => {
          if (res.code == 200) {
            this.huixianList = res.data;
            this.total = res.data.total;

            this.List = res.data.list;
            this.List.forEach((element, i) => {
              this.List[i].index = (this.val - 1) * 10 + i + 1;
            });
          }
        }
      );
    },
    shuax() {
      this.toBottom();
      this.$message({
        message: "刷新成功",
        type: "success"
      });
    },
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.toBottom();
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="scss" scoped>
.option {
  padding: 10px;
}
</style>
<style>
.ddddd {
  display: flex;
  /* justify-content: space-between; */
  font-size: 16px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #dfdfdd;
}
.wewewe {
  width: 60px;
}
.didi {
  display: block;
}
.ssss {
  margin-right: 150px;
  width: 200px;
}
/* .shuaxing{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background: #409eff;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    margin: 5px;
    cursor: pointer;
} */
</style>

